{% extends 'base/base.html' %}
{% load static %}
{% block css %}
    <link href="{% static "css/dataTables.bootstrap.min.css" %}" rel="stylesheet">
    <style>
        .btn-default:hover{
            background-color: dodgerblue !important;
        }
        tr td,th{
            text-align: center;
        }

    </style>
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                        <a href="{% url 'user_add' %}" style="float:left;" class="btn btn-info btn-sm" role="button"><i class="fa fa-plus"></i></a>
                    <h2>随访患者调查问卷待提交名单
                    <small>河南省</small>
                    </h2>

                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                        <li><a class="close-link"><i class="fa fa-close"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">

                    <div class="col-md-12 col-sm-12 col-xs-12">

                        <div class="table-responsive">
                            <table id="datatable-buttons" class="table table-striped table-bordered table-hover table-condensed jambo_table bulk_action">
                                <thead>
                                    <tr>
                                        <th>登录账号</th>
                                        <th>调查人姓名</th>
                                        <th>调查日期</th>
                                    </tr>
                                </thead>
                                <tbody id="tb">
                                    {% for row in user_obj %}
                                    <tr class="even pointer">
                                        <td>{{ row.登录账号 }}</td>
                                        <td>{{ row.填表人签名 }}</td>
                                        <td>{{ row.填表人填写日期 }}</td>
{#                                      <td>{{ row.last_login|date:"Y-m-d H:i:s" }}</td>#}
                                    </tr>

                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 信息删除确认 -->
<div class="modal fade" id="delcfmModel">
  <div class="modal-dialog">
    <div class="modal-content message_align">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title">提示信息</h4>
      </div>
      <div class="modal-body">
        <p>您确认要删除吗？</p>
      </div>
      <div class="modal-footer">
         <input type="hidden" id="delNid"/>
         <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
         <a  id="DelConfirm" class="btn btn-success" data-dismiss="modal">确定</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <!-- 多条删除 -->
<div class="modal fade" id="delSelect">
        <div class="modal-dialog">
            <div class="modal-content message_align">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title">提示信息</h4>
                </div>
                <div class="modal-body" id="delinfo">
                    <p>您确认要删除吗？</p>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="delNid"/>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="DelSelectConfirm" class="btn btn-success" data-dismiss="modal">确定</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
{% endblock %}

{% block js %}
    <script src="{% static "js/jquery.dataTables.min.js" %}"></script>
    <!-- datatable button  -->
    <script src="{% static "js/dataTables.bootstrap.min.js" %}"></script>

    <script>


            $(function () {
                bindDel();
                bindDelConfirm();
                del_select();
                datatable_func();
                bindSelectDelConfirm();
            });

            function del_select() {
            arrdel = [];
            $("#del_select").click(function () {

                $("input[name='table_records']:checkbox").each(function () {
                    if (true == $(this).is(':checked')) {
                        arrdel.push($(this).val());
                    }
                });
                console.log(arrdel)
                if(arrdel.length>0){
                    $("#delinfo").html("您确定要删除选中的"+arrdel.length+"条数据吗？");
                    $("#delSelect").modal('show');
                }
            })
        }
            function bindSelectDelConfirm() {
            delnum = arrdel;
            $("#DelSelectConfirm").click(function () {
                $.ajax({
                    url: '{% url 'user_del' %}',
                    type: 'POST',
                    data:{'nid': delnum},
                    success: function (arg) {
                        var dict = JSON.parse(arg);
                        if(dict.status){
                            $("#tb tr.selected").remove();
                        }
                    }
                })
            })
        }
            function bindDel() {
                $("#tb").on('click','.del_row',function () {
                $("#delcfmModel").modal("show");
                var rowId = $(this).parent().parent().prop("id");
                $("#delNid").val(rowId);
            })
            }
            function bindDelConfirm() {
                var arr=[];
                $("#DelConfirm").click(function () {

                    var rowId = $("#delNid").val();
                    arr.push(rowId);
                    console.log(arr);
                    $.ajax({
                        url: '{% url 'user_del' %}',
                        type: 'POST',
                        data: {'nid':arr},
                        success: function (arg) {
                            var dict = JSON.parse(arg);
                            if(dict.status){
                                $('tr[id="'+ rowId+'"]').remove()
                            }
                            $('#delcfmModel').modal('hide');
                        }
                    })
                })
            }
            function datatable_func() {
            $('#datatable-buttons').dataTable({
                bFilter: true,    //去掉搜索框方法三：这种方法可以
                bLengthChange: true,   //去掉每页显示多少条数据方法
                aLengthMenu:[20,50,100,200], // 定义每页显示数据数量,
                paging: true,
                bInfo: true,
                language: {
                        "sProcessing": "处理中...",
                        "sLengthMenu": "显示 _MENU_ 项结果",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索:",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                }
            });
        }

    </script>

{% endblock %}

